<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
	<meta charset="utf-8"> 
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=500" />
	<meta name="keywords" content="ScrollMagic, example, scrolling, attaching, scrollbar, scene, manipulation, updates" />
	<meta name="author"	content="Jan Paepke (www.janpaepke.de)" />
	<title>Scene Manipulation - Examples - ScrollMagic</title>

	<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,400italic|Josefin+Slab:400,700italic' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="../../assets/css/normalize.css" type="text/css">
	<link rel="stylesheet" href="../../assets/css/style.css" type="text/css">
	<link rel="stylesheet" href="../../assets/css/examples.css" type="text/css">
	<link rel="shortcut icon" href="../../assets/img/favicon.ico" type="image/x-icon">

	<script type="text/javascript" src="../../assets/js/lib/jquery.min.js"></script>
	<script type="text/javascript" src="../../assets/js/lib/highlight.pack.js"></script>
	<script type="text/javascript" src="../../assets/js/lib/modernizr.custom.min.js"></script>
	<script type="text/javascript" src="../../assets/js/examples.js"></script>
	
	<script type="text/javascript" src="../../assets/js/lib/gsap3/gsap.min.js"></script>
	<script type="text/javascript" src="../../scrollmagic/uncompressed/ScrollMagic.js"></script>
	<script type="text/javascript" src="../../scrollmagic/uncompressed/plugins/animation.gsap.js"></script>
	<script type="text/javascript" src="../../scrollmagic/uncompressed/plugins/debug.addIndicators.js"></script>
</head>
<body>
	<ul id="menu"></ul>
	<div id="content-wrapper">
		<div id="example-wrapper">
			<div class="scrollContent">
				<section id="titlechart">
					<div id="description">
						<h1 class="badge gsap">Scene Manipulation</h1>
						<h2>Scenes can be completely updated on the fly.</h2>
						<p>
							Play around with the options to better understand their effect on the scene.
							If you would like to know more about the scene options and methods, please refer to the <a href="../../docs/ScrollMagic.Scene.html">documentation</a>.
						</p>
						<a href="#" class="viewsource">view source</a>
					</div>
				</section>
				<section class="demo">
					<form class="move">
						<fieldset id="options">
							<legend>Options</legend>
							<div title="default: 0">
								<label for="duration">duration</label>
								<div class="slider liveupdate"></div>
								<input type="text" id="duration" size="3" value="" min="0" max="600" step="1">
							</div>
							<div title="default: 0">
								<label for="offset">offset</label>
								<div class="slider liveupdate"></div>
								<input type="text" id="offset" size="3" value="" min="-300" max="300" step="1">
							</div>
							<div title="default: null">
								<label for="triggerElement">triggerElement</label>
								<input type="text" id="triggerElement" value="">
								<button name="triggerElement" value="0">update</button>
							</div>
							<div title="default: &quot;onCenter&quot; == 0.5">
								<label for="triggerHook">triggerHook</label>
								<div class="slider liveupdate"></div>
								<input type="text" id="triggerHook" size="3" value="" min="0" max="1" step="0.01">
							</div>
							<div title="default: &quot;onCenter&quot; == 0.5">
								<label></label>
								<button name="triggerHook" value="0">onLeave</button>
								<button name="triggerHook" value="0.5">onCenter</button>
								<button name="triggerHook" value="1">onEnter</button>
							</div>
							<div title="default: true">
								<label for="reverse">reverse</label>
								<input type="checkbox" id="reverse" value="1">
							</div>
							<div title="default: false">
								<label for="tweenChanges">tweenChanges</label>
								<input type="checkbox" id="tweenChanges" value="1">
							</div>
						</fieldset>
						<fieldset id="actions">
							<legend>Actions</legend>
							<div>
								<label for="enabled">Scene enabled</label>
								<input type="checkbox" id="enabled" value="1" checked>
							</div>
							<div>
								<label for="tween">do tween</label>
								<input type="checkbox" id="tween" value="1" checked>
							</div>
							<div>
								<label for="pin">do pin</label>
								<input type="checkbox" id="pin" value="1" checked>
							</div>
						</fieldset>
					</form>
					<div class="spacer s2"></div>
					<div id="trigger" class="spacer s0"></div>
					<div id="target" class="box1 blue">
						<p>I feel dizzy.</p>
						<a href="#" class="viewsource">view source</a>
					</div>
					<div class="spacer s3"></div>
					<script>
						$(function () { // wait for document ready
							// init controller
							var controller = new ScrollMagic.Controller();

							// build tween
							var tween = TweenMax.to("#target", 1, {rotation: 360, ease: Linear.easeNone});

							// build scene
							var scene = new ScrollMagic.Scene({triggerElement: "#trigger", duration: 300})
											.setTween(tween)
											.setPin("#target", {pushFollowers: false})
											.addIndicators() // add indicators (requires plugin)
											.addTo(controller);
							
							// init options
							$("input#duration").val(scene.duration());
							$("input#offset").val(scene.offset());
							$("input#triggerElement").val("#" + scene.triggerElement().getAttribute("id"));
							$("input#triggerHook").val(scene.triggerHook());
							$("input#reverse").prop("checked", scene.reverse());
							$("input#tweenChanges").prop("checked", scene.tweenChanges());

							$("div.slider+input").change(); // trigger change to init sliders.

							// form actions
							// update on change
							$("form #options input:not(#triggerElement)").on("change", function (e) {
								var
									val = $(this).is("[type=checkbox]") ? $(this).prop("checked") : $(this).val(),
									property = $(this).attr("id");
								scene[property](val);
							});
							// actions
							$("form #actions input[type=checkbox]").on("change", function (e) {
								var
									active = $(this).prop("checked"),
									type = $(this).attr("id");
								if (type == "tween") {
									if (active) {
										scene.setTween(tween);
									} else {
										scene.removeTween(true);
									}
								} else if (type == "pin") {
									if (active) {
										scene.setPin("#target", {pushFollowers: false});
									} else {
										scene.removePin(true);
									}
								} else if (type == "enabled") {
									scene.enabled(active);
								}
							});
							// update triggerElement
							$("form #options button[name=triggerElement]").on("click", function (e) {
								e.preventDefault();
								var
									selector = $.trim($("input#triggerElement").val());
								if (selector === "") {
									scene.triggerElement(null);
								} else if ($(selector).length > 0) {
									scene.triggerElement(selector);
								} else {
									alert("No element was found using the selector \"" + selector + "\".");
									$("input#triggerElement").val("");
									scene.triggerElement(null);
								}
							});
							// triggerHook Buttons
							$("form #options button[name=triggerHook]").on("click", function (e) {
								e.preventDefault();
								$("input#triggerHook")
									.val($(this).val())
									.change();

							});
						});
					</script>
				</section>
				<div class="spacer s_viewport"></div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="../../assets/js/tracking.js"></script>
</body>
</html>
